<template>
	<view>
		
		<view class="list">
			<view class="flex_col" @longpress="onLongPress" :class="{'active':pickerUserIndex==index}"
			 @tap="listTap(item.username,item.flag)"
			 v-for="(item,index) in userList"
			 :key="index" :data-index="index">
				<image src="../../static/logo.png" mode="aspectFill"></image>
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">{{item.nickName}}</view>
						<view class="time">{{item.flag ==0?"成员":item.flag==1?"群主":"管理员"}}</view>
					</view>
					<!-- <view class="info">{{item.info}}</view> -->
				</view>
			</view>
		</view>
		<view class="shade" v-show="showShade" @tap="hidePop">
			<view class="pop" :style="popStyle" :class="{'show':showPop}">
				<view v-for="(item,index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">{{item}}</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				//groupList:[],
				userList: [],
				groupInfo:{},
				/* 窗口尺寸 */
				winSize: {},
				/* 显示遮罩 */
				showShade: false,
				/* 显示操作弹窗 */
				showPop: false,
				/* 弹窗按钮列表 */
				popButton: ["移出群聊"],
				/* 弹窗定位样式 */
				popStyle: "",
				/* 选择的用户下标 */
				pickerUserIndex: -1
			}
		},
		onLoad(option){
			_this=this;
			this.groupInfo=option;
			console.log(option);
			
			this.getListData();
			
			this.getWindowSize();
			
			// #ifdef H5
			document.onLong = function(e) {
				var e = e || window.event;
				e.preventDefault();
			};
			// #endif
			
			
			
		},
		methods: {
			/* 列表触摸事件 */
			//用户名,权限
			listTap(username,flag) {
				/* 因弹出遮罩问题，所以需要在遮罩弹出的情况下阻止列表事件的触发 */
				if (this.showShade) {
					return;
				}
			//	console.log("列表触摸事件触发"+gid)			
			},
			/* 获取列表数据 */
			getListData() {
				//let list = [];			
			 	 this.$jjim.getGroupMembers(_this.groupInfo.gid).then(function(data) {
				  //flag  0：普通成员 1：群主 2：管理员
					 console.log(data)
					 _this.userList=data.member_list;
					 uni.setNavigationBarTitle({
					        title:_this.groupInfo.name+"成员列表("+_this.userList.length+")"
					  });
				},function(error){
					uni.showToast({
						title: error,
						icon: "none",
						mask: true,
						duration: 600
					});
				}) 
				
				
				/* for (let i = 0; i < 20; i++) {
					list.push({
						"name": `第${i+1}个用户`,
						"time": '5月20日',
						"info": `这是第${i+1}个用户的聊天信息`
					})
				} */
				//this.userList = list; 
			},
			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							"witdh": res.windowWidth,
							"height": res.windowHeight
						}
					}
				})
			},
			/* 长按监听 */
			onLongPress(e) {
				let [touches, style, index] = [e.touches[0], "", e.currentTarget.dataset.index];
			
				/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
				if (touches.clientY > (this.winSize.height / 2)) {
					style = `bottom:${this.winSize.height-touches.clientY}px;`;
				} else {
					style = `top:${touches.clientY}px;`;
				}
				if (touches.clientX > (this.winSize.witdh / 2)) {
					style += `right:${this.winSize.witdh-touches.clientX}px`;
				} else {
					style += `left:${touches.clientX}px`;
				}
			
				this.popStyle = style;
				this.pickerUserIndex = Number(index);
				this.showShade = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPop = true;
					}, 10);
				});
			},
			/* 隐藏弹窗 */
			hidePop() {
				this.showPop = false;
				this.pickerUserIndex = -1;
				setTimeout(() => {
					this.showShade = false;
				}, 250);
			},
			/* 选择菜单 */
			pickerMenu(e) {
				let index = Number(e.currentTarget.dataset.index);
				// console.log(`第${this.pickerUserIndex+1}个用户,第${index+1}个按钮`);
				// 在这里开启你的代码秀
			    const groupIn=_this.userList[this.pickerUserIndex];
			   //  console.log(groupIn )
			     if(index==0){  //移出群聊
	                 let user=[];
					 user.push({
						 'username':groupIn.username,
						 'appkey':groupIn.appkey
					 })
					 this.$jjim.delGroupMembers(_this.groupInfo.gid,user).then(function(data) {
					      console.log(data)
					 	uni.showToast({
					 		title: `移除成功`,
					 		icon: "none",
					 		mask: true,
					 		duration: 600
					 	});
					 	_this.getListData();
					 },function(error){
						// if(error.contains("request user no permission")){
							 uni.showToast({
							 	title: `你不是管理员,没有权限操作`,
							 	icon: "none",
							 	mask: true,
							 	duration: 600
							 });
						// }
					 	 
					 })
					 
					/* uni.showToast({
						title: `第${this.pickerUserIndex+1}个用户,第${index+1}个按钮`,
						icon: "none",
						mask: true,
						duration: 600
					}); */
					 
				 }
				
				/* 
				 因为隐藏弹窗方法中会将当前选择的用户下标还原为-1,
				 如果行的菜单方法存在异步情况，请在隐藏之前将该值保存，或通过参数传入异步函数中
				 */
				this.hidePop();
			}
		}
	}
</script>

<style  scoped lang="scss">
/* .list{
	  width: 100%;
	  height: 100rpx;
	  display: flex;
	  flex: 6;
	  text-align: center;
	  background-color: white;

	 
  }
  /* .list:hover{
	//  background-color: #C8C7CC;
	  
  } */
  
  /* .list-img{
	  flex: 1;

	  border-bottom: 1px solid #C8C8CD;
  }
  .list-img>image{
	  width: 80rpx;
	  height: 80rpx;
	  border-radius: 50%;
	  background-color: #DCDEE2;
	  margin-top: 20rpx;
	  position:relative;
	  top: -10rpx;
  }
   .list-name{
	   flex: 5;
	   text-align: left;
	   font-size: 33rpx;
	   line-height: 105rpx;
	     border-bottom: 1px solid #C8C8CD;
   } */ 
   
   /* 列式弹性盒子 */
   .flex_col {
   	display: flex;
   	flex-direction: row;
   	flex-wrap: nowrap;
   	justify-content: flex-start;
   	align-items: center;
   	align-content: center;
   }
   
   /* 弹性盒子弹性容器 */
   .flex_col .flex_grow {
   	width: 0;
   	-webkit-box-flex: 1;
   	-ms-flex-positive: 1;
   	flex-grow: 1;
   }
   
   .flex_row .flex_grow {
   	-webkit-box-flex: 1;
   	-ms-flex-positive: 1;
   	flex-grow: 1;
   }
   
   /* 弹性盒子允许换行 */
   .flex_col.flex_wrap {
   	-ms-flex-wrap: wrap;
   	flex-wrap: wrap;
   }
   
   /* 列表 */
   .list {
   	background-color: #fff;
   	font-size: 28upx;
   	color: #333;
   	user-select: none;
   	touch-callout: none;
   
   	&>view {
   		padding: 24upx 30upx;
   		position: relative;
   
   		&:active,
   		&.active {
   			background-color: #f3f3f3;
   		}
   
   		image {
   			height: 80upx;
   			width: 80upx;
   			border-radius: 4px;
   			margin-right: 20upx;
   		}
   
   		&>view {
   			line-height: 40upx;
   
   			.time,
   			.info {
   				color: #999;
   				font-size: 24upx;
   			}
   
   			.time {
   				width: 150upx;
   				text-align: right;
   			}
   
   			.info {
   				overflow: hidden;
   				text-overflow: ellipsis;
   				white-space: nowrap;
   			}
   		}
   	}
   
   	&>view:not(:first-child) {
   		margin-top: 1px;
   
   		&::after {
   			content: '';
   			display: block;
   			height: 0;
   			border-top: #CCC solid 1px;
   			width: 620upx;
   			position: absolute;
   			top: -1px;
   			right: 0;
   			transform:scaleY(0.5);	/* 1px像素 */
   		}
   	}
   }
   
   /* 遮罩 */
   .shade {
   	position: fixed;
   	z-index: 100;
   	top: 0;
   	right: 0;
   	bottom: 0;
   	left: 0;
   	-webkit-touch-callout: none;
   
   	.pop {
   		position: fixed;
   		z-index: 101;
   		width: 200upx;
   		box-sizing: border-box;
   		font-size: 28upx;
   		text-align: left;
   		color: #333;
   		background-color: #fff;
   		box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
   		line-height: 80upx;
   		transition: transform 0.15s ease-in-out 0s;
   		user-select: none;
   		-webkit-touch-callout: none;
   		transform: scale(0, 0);
   
   		&.show {
   			transform: scale(1, 1);
   		}
   
   		&>view {
   			padding: 0 20upx;
   			overflow: hidden;
   			text-overflow: ellipsis;
   			white-space: nowrap;
   			user-select: none;
   			-webkit-touch-callout: none;
   
   			&:active {
   				background-color: #f3f3f3;
   			}
   		}
   	}
   }
   
   
   
</style>
